<template>
    <!-- 数据操作控件 -->
    <div class="data-options" ref="dataOptions" v-show="optionShow">
        <div class="left-options">
            <el-button
                v-for="(item, index) in leftConfig"
                :plain="item.plain"
                :key="index"
                :icon="item.icon"
                :type="item.type"
                :size="optionConfig.size | setSize(optionConfig.size)"
                :disabled="item.disabled"
                v-hasPermi="item.hasPermi ? item.hasPermi : ''"
                @click="handelButtonClick(item.prop)"
            >
                {{ item.label }}
            </el-button>
        </div>
        <div class="right-options">
            <el-tooltip
                class="item"
                :effect="theme"
                placement="bottom"
                v-for="(item, index) in rightConfig"
                :content="item.label"
                :key="index"
            >
                <el-button
                    plain
                    circle
                    :icon="item.icon"
                    size="mini"
                    :disabled="item.disabled"
                    @click="handelButtonClick(item.prop)"
                />
            </el-tooltip>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    computed: {
        ...mapState({
            theme: state => state.settings.theme,
            size: state => state.settings.size
        })
    },
    props: {
        // 左侧按钮配置
        leftConfig: {
            type: Array,
            default: () => [
                {
                    prop: 'addTableData',
                    label: '新增',
                    icon: 'el-icon-plus',
                    type: 'primary',
                    disabled: false
                },
                {
                    prop: 'updateTableData',
                    label: '修改',
                    icon: 'el-icon-edit',
                    type: 'success',
                    disabled: false
                },
                {
                    prop: 'deleteTableData',
                    label: '删除',
                    icon: 'el-icon-delete',
                    type: 'danger',
                    disabled: false
                },
                {
                    prop: 'importTableData',
                    label: '导入',
                    icon: 'el-icon-upload2',
                    type: 'info',
                    disabled: false
                },
                {
                    prop: 'exportTableData',
                    label: '导出',
                    icon: 'el-icon-download',
                    type: 'info',
                    disabled: false
                }
            ]
        },
        // 右侧按钮配置
        rightConfig: {
            type: Array,
            default: () => [
                {
                    prop: 'switchSearchStatus',
                    icon: 'el-icon-sort',
                    type: 'info',
                    disabled: false,
                    label: '搜索显隐'
                },
                {
                    prop: 'refreshTableData',
                    icon: 'el-icon-refresh-right',
                    type: 'info',
                    disabled: false,
                    label: '刷新'
                },
                {
                    prop: 'switchTableColumn',
                    icon: 'el-icon-menu',
                    type: 'info',
                    disabled: false,
                    label: '列显隐'
                },
                {
                    prop: 'fullTableContener',
                    icon: 'el-icon-full-screen',
                    type: 'info',
                    disabled: false,
                    label: '全屏'
                }
            ]
        },
        // 操作栏配置
        optionConfig: {
            type: Object,
            default: () => {
                return {
                    size: undefined
                }
            }
        }
    },
    data() {
        return {
            optionShow: true,
            // 操作弹框是否显示
            dialogShow: false,
            // 表格是否全屏
            tableFull: false,
            value: []
        }
    },
    methods: {
        // 修改按钮的状态
        updateButtonStatus(prop, attr, value) {
            this.leftConfig.forEach(ele => {
                if (ele.prop === prop) {
                    ele[attr] = value
                }
            })
            this.rightConfig.forEach(ele => {
                if (ele.prop === prop) {
                    ele[attr] = value
                }
            })
        },
        // 导出
        export() {
            console.log('导出')
        },
        // 搜索条件显隐藏
        searchLsattr() {
            console.log('搜索条件显隐藏')
        },
        // 表格列显隐藏
        columnLsattr() {
            console.log('表格列显隐藏')
        },
        // 按钮点击
        handelButtonClick(event) {
            if (event === 'fullTableContener') {
                this.$bus.$emit('TableFull')
                this.tableFull = !this.tableFull
                if (this.tableFull) {
                    this.updateButtonStatus(
                        'fullTableContener',
                        'icon',
                        'el-icon-copy-document'
                    )
                } else {
                    this.updateButtonStatus(
                        'fullTableContener',
                        'icon',
                        'el-icon-full-screen'
                    )
                }
            }
            this.$emit('buttonClick', event)
        }
    }
}
</script>
<style lang="scss" scoped>
.data-options {
    @include box_flex(
        $width: 100%,
        $height: 100%,
        $direction: row,
        $justify: space-between,
        $align: center
    );

    transition: all 0.3s ease-in-out;
    .left-options {
        @include box_flex(
            $width: auto,
            $height: 100%,
            $direction: row,
            $justify: flex-start,
            $align: center
        );
    }
    .right-options {
        @include box_flex(
            $width: auto,
            $height: 100%,
            $direction: row,
            $justify: flex-end,
            $align: center
        );
    }
}
</style>
